<template>
  <!-- 双十一官方物料专用模板 -->
  <view class="item_list">
    <view class="item_box">
      <view v-for="(item,index) in questionList" :key="index" @click="goDetail(item.id, item.goodsId || item.item_id, item)"
        class="item" v-bind:class="{ advertising: item.isAdvertising }">
        <!-- 主图 -->
        <!-- <image :src="item.pict_url" mode="widthFix" class="main_img" v-bind:class="{ ad_img: item.isAdvertising }"
          :lazy-load="true"></image> -->
        <view class="main_img" :class="{ ad_img: item.line }">
          <ImageLoad :src="item.pict_url" mode="widthFix"/>
        </view>
        <!-- 非广告位商品介绍 -->
        <view class="controduction" v-if="!item.isAdvertising">
          <view class="title">{{item.dtitle || item.title}}</view>
          <!-- 售价信息 -->
          <view class="sales">
            <text class="debosit">定金￥<text class="number">{{item.presale_deposit}}</text></text>
            <text class="final_price">预售价￥{{item.zk_final_price}}</text>
          </view>
          <view class="sales_number">
            <image class="hot_icon" src="https://img.alicdn.com/tfs/TB1yafnhkP2gK0jSZPxXXacQpXa-64-64.png" mode=""></image>2小时<text class="number">{{item.volume}}</text>人已付定金
          </view>
        </view>
        <view class="bottom">
          <view v-if="item.presale_discount_fee_text" class="coupon_immediately">{{item.presale_discount_fee_text}}</view>
          <view v-if="item.coupon_amount" class="coupon_after">
            尾款可用券<text class="text">{{item.coupon_amount}}元</text><!-- <image class="bg" src=""></image> -->
          </view>
          <button class="buy_btn">立即付定金</button>
        </view>
      </view>

    </view>
  </view>
  </view>
</template>

<script>
  import ImageLoad from '@/pages/pagecomponents/other/imageload'
  export default {
    components: {
      ImageLoad,
    },
    props: {
      questionList: {
        // 图片数组
        type: Array,
        default: () => []
      },
      userInfo: {
        type: Object,
      },
      rankType: {
        // 榜单等级
        type: Number,
        default: 1
      },
    },
    data() {
      return {}
    },
    created() {
      let token = uni.getStorageSync('token')
    },
    methods: {
      goDetail(id, goodsId, item) {
        if (goodsId) {
          // 广告位不存在goosdId
          uni.navigateTo({
            url: `/pages/itemdetail/index?id=${id}&&goodsId=${goodsId}`
          });
        }
      },
      calcCouponPrice(couponInfo) {
        // 计算优惠券价格
        if (couponInfo) {
          return couponInfo.slice(couponInfo.indexOf("减") + 1, couponInfo.length - 1);
        }
      },
      calcFinalPrice(zkFinalPrice, couponInfo) {
        // 计算券后价格
        if (zkFinalPrice && couponInfo) {
          return (zkFinalPrice - couponInfo.slice(couponInfo.indexOf("减") + 1, couponInfo.length - 1)).toFixed(2)
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .item_list {
    .item_box {
      margin-top: 30upx;
      padding: 0 20upx;
      .item {
        position: relative;
        margin-bottom: 80upx;
        padding-bottom: 20upx;
        width: 710upx;
        background-color: #ffffff;
        box-shadow: 0px 20upx 40upx 0px rgba(0, 0, 0, 0.1);
        .main_img {
          display: inline-block;
          box-shadow: 6px 0px 5px -5px #9b9b9b, -6px 0px 5px -5px #9b9b9b;
          position: absolute;
          left: 20upx;
          top: -40upx;
          border-radius: 10upx;
          width: 240upx;
          height: 240upx;
          overflow: hidden;
        }
        .ad_img {
          display: inline-block;
          border-radius: 10upx;
          width: 100%;
          overflow: hidden;
        }
        .controduction {
          width: 450upx;
          height: 230upx;
          margin-left: 280upx;
          display: inline-block;
          vertical-align: top;
          .title {
            width: 430upx;
            // height: 50upx;
            line-height: 50upx;
            color: #393939;
            font-size: 30upx;
            font-weight: 600;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .sales{
            width: 400upx;
            background-image: linear-gradient(270deg,#fff,#f5e9ff);
            .debosit{
              color: #8323f6;
              .number{
                font-weight: 600;
                font-size: 40upx;
              }
            }
            .final_price{
              margin-left: 10upx;
            }
          }
          .sales_number {
            color: #b1b6bd;
            font-size: 30upx;
            height: 60upx;
            line-height: 60upx;
            .hot_icon{
              background-color: transparent;
              width: 30upx;
              height: 30upx;
            }
            .number {
              margin-left: 5upx;
              color: #FF7800;
            }
          }
          .tab {
            height: 50upx;
            line-height: 50upx;
            .text {
              margin-right: 10upx;
              padding: 5upx 10upx;
            }
            .coupon_price {
              color: #f4757e;
              background-color: #feeae9;
            }
            .item_brand {
              color: #9dced7;
              background-color: #edf3f9;
            }
          }
        }
        .bottom {
          .coupon_immediately{
            margin-left: 10upx;
            display: inline-block;
            padding: 0 5upx;
            border: 1px solid #9013fe;
            color: #9013fe;
            position: relative;
            line-height: 35upx;
          }
          .coupon_after{
            margin-left: 10upx;
            display: inline-block;
            padding: 0 5upx;
            color: #FFFFFF;
            position: relative;
            line-height: 35upx;
            background: url('https://img.alicdn.com/tfs/TB1eNdkhND1gK0jSZFsXXbldVXa-270-62.png') no-repeat;
            background-size: 75px 100%;
            .text{
              padding-left: 10upx;
              display: inline-block;
              color: #f63341;
              border: 1px solid #f63341;
              line-height: 35upx;
            }
          }
          .buy_btn {
            padding: 10upx 10upx 0;
            color: #fff;
            font-size: 25upx;
            width: 140upx;
            height: 50upx;
            line-height: 35upx;
            border-radius: 40upx;
            float: right;
            margin-right: 20upx;
            background-color: #9228f4;
          }
        }
      }
      .advertising {
        width: 100%;
        display: block;
      }
    }
  }
</style>
